<!--下拉框/搜索框-->
<template>
	<el-select
		ref="selectRef"
		style="width: 100%"
		v-model="value"
		v-bind="attrs"
		:id="'c' + columnId"
		:name="'c' + columnId"
		:size="mySize"
		:clearable="clearable"
		:remote="remote"
		:remote-method="remoteMethod"
		@focus="focusMethod"
		@visible-change="visibleChange"
	>
		<el-option v-for="item in theOptions" :key="item[nodeValue]" :value="item[nodeValue]" :label="item[nodeLabel]">
			<div style="display: flex; justify-content: space-between">
				<span v-for="(showItem, index) in showLabel" :key="index">
					{{ item[showItem] }}
				</span>
			</div>
		</el-option>
	</el-select>
</template>

<script lang="ts" setup>
// 引入组件需要的属性 引入表单子控件的管理类
import { itemProps, itemController, selectProps, initSelect } from '../lib/mapController';
// 定义属性
const props = defineProps({
	...itemProps, // 基础属性
	...selectProps,
	modelValue: {
		type: [Number, String, Boolean, Array],
		default: '',
	},
	lazy: {
		type: Boolean,
		default: false,
	},
});
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue', 'visible-change']);
const allAttrs = computed(() => {
	return Object.assign(props.extend, attrs);
});
const { value, globalSize } = itemController(props, allAttrs.value, emit);
const state = reactive({
	mySize: allAttrs.value.size,
	once: false,
});
const selectRef = ref();
const { theOptions, nodeLabel, nodeValue, showLabel, remoteMethod, scrollMethod, initSelectMethod, focusMethod } = initSelect(
	props,
	value
);
function visibleChange(val) {
	setTimeout(() => {
		let el = selectRef.value.$refs.scrollbar.$el;
		const poper = el.querySelector('.el-select-dropdown__wrap');
		if (!state.once && props.lazy) {
			poper.addEventListener('scroll', function () {
				const CONDITION = poper.scrollHeight - poper.scrollTop <= poper.clientHeight + 0.5;
				if (CONDITION) {
					scrollMethod();
				}
			});
			state.once = true;
		}
		emit('visible-change',val);
	}, 10);
}
// 初始化
if (allAttrs.value.multiple && allAttrs.value.remote) {
	initSelectMethod();
}
globalSize(state);
// 输出
const { mySize } = toRefs(state);
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-ele-select',
	inheritallAttrs: false,
};
</script>
<style></style>
